<template>
	<view class="content">

		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/sxy.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/sxy.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
							</view>
							<view class="font-size-32 color-FFF font-weight-500">
								商学院
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
		</view>
		<view class="view-list">
			<view class="padding-about-24 padding-top-01 ">
				<view class="display-flex  align-items margin-top-20 space-between">
					<view class="width-100">

						<uv-tabs :list="tabslist" @click="swiperTabs" lineWidth="15"
							lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
									color: '#262626',
									fontWeight: 'bold',
									transform: 'scale(1.05)',
									fontSize:'28rpx'
						    	}" :inactiveStyle="{
									color: '#7C7C7C',
									transform: 'scale(1)',
									fontSize:'28rpx'
								}" itemStyle="width:42%;height: 34px;"></uv-tabs>
					</view>
				</view>
				<view v-if="buslist.length == 0" class="font-size-26 text-center margin-top-120 color-666">
					暂无推客联盟数据~
				</view>
				<view class=" margin-top-20">
					<view v-for="item,index in buslist" :key="index" @click="gotodetails(item)"
						class=" view margin-top-20 display-flex position-relative">
						<image :src="item.images" style="width: 280rpx;height: 200rpx;" class="border-radius-12"
							mode="aspectFill"></image>
						<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
							<view class="">
								<view class="font-size-28 webkit-line-clamp font-weight-500"
									style="-webkit-line-clamp: 2;">
									{{item.title}}
								</view>
								<!-- <view class="font-size-24 margin-top-10 webkit-line-clamp color-666"
									style="-webkit-line-clamp: 2;">
									{{item.intro}}
								</view> -->
							</view>

							<view class="display-flex margin-top-20 space-between align-items">
								<!-- <view class="display-flex align-items">
									<image :src="item.icon" style="width: 40rpx;height: 40rpx;" class="border-radius"
										mode="aspectFill"></image>
									<view class="font-size-24 margin-left-10">
										{{item.name}}
									</view>
								</view>
								<view class="display-flex align-items">
									<image :src="imgaeUrl('/static/home/xin.png')"
										style="width: 24rpx;height: 21.62rpx;" mode="aspectFill"></image>
									<view class="font-size-24 font-weight-500 margin-left-10">
										{{(item.like_num / 10000).toFixed(2)}}万
									</view>
								</view> -->
								<view class="font-size-24 color-999 margin-left-10">
									{{(item.like_num / 10000).toFixed(2)}}万人学习
								</view>
								<image v-if="item.is_lock" :src="imgaeUrl('/static/suo.png')" style="width: 120rpx;"
									mode="widthFix">
								</image>
							</view>
						</view>
						<!-- <image  :src="imgaeUrl('/static/home/soud.png')"
							class="position-absolute transform-translate-center"
							style="width: 80rpx;height: 80rpx;top: 50%;left: 50%;" mode=""></image> -->
					</view>

				</view>
			</view>
		</view>
		<div class="kong"></div>
		<uv-popup ref="popup" round="12" :safeAreaInsetBottom="false" closeOnClickOverlay mode="center">
			<view class="popupview">
				<image :src="imgaeUrl('/static/alert.png')" style="width: 100%;height: ;" mode="widthFix">
				</image>
				<view class="display-flex flex-direction-column center align-items"
					style="padding: 20rpx 24rpx 34rpx 24rpx;">
					<view class="font-size-28 font-weight-500">
						亲，解锁需要等级为初级推客
					</view>
					<view class="font-size-26 color-666 margin-top-05">
						请加油哦！
					</view>
					<view class="display-flex align-items margin-top-60">
						<view @click="popup.close()" style="background: #F5F5F5;color: #cccccc;"
							class="button color-FFF font-size-28 font-weight-500 ">
							知道了
						</view>
						<view @click="switchTab('/pages/Mine/mine/mine')" style="background: #FF7E00;"
							class="button color-FFF font-size-28 margin-left-40 font-weight-500">
							去升级
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		switchTab
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const tabslist = ref([{
		name: '推客入门',
		type: '1'
	}, {
		name: '带货入门',
		type: '2'
	}])
	const pagingState = ref(false)
	const page = ref(1)
	const buslist = ref([]) //热门视频
	const type = ref(1)
	const popup = ref(null)
	onLoad(function(option) {
		getSchool()
	});
	onShow(function() {});

	function swiperTabs(e) {
		type.value = e.type
		pagingState.value = false
		page.value = 1
		buslist.value = []
		getSchool()
	}

	function gotodetails(item) {
		console.log(item);
		if (item.is_lock) return popup.value.open()
		if (item.type == 2) {
			console.log([item.video_url]);

			wx.previewMedia({
				sources: [{
					url: item.video_url,
					type: 'video'
				}], // 需要预览的资源列表
				current: 0, // 当前显示的资源序号
				url: item.video_url // 当前预览资源的url链接
			})
		} else {
			navigateTo('/pages/Home/businessDetails/businessDetails?id=' + item.id)
			//wenzhang
		}

	}
	async function getSchool() {
		let object = {
			page: page.value,
			shcool_type: type.value
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.getSchool(object)
			buslist.value = buslist.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		getSchool()
	});
</script>

<style scoped lang="scss">
	.button {
		width: 200rpx;
		height: 70rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popupview {
		width: 582rpx;
		background: #FFFFFF;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.view-list {
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		margin-top: -60rpx;
		z-index: 9999;
		background: #F5F5F5;
	}

	.backGround {
		width: 750rpx;
		height: 440rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>